/**
 * Created by DELL on 2017/6/8.
 */
var $level1=$("#level1");
var $level2=$("#level2");
getList();
function getList() {
    $.post(window.globalHost+common.menuListPath,{}).success(function (data) {
        var detailInfo=common.transformData(data);
        lv1Render($level1,detailInfo);
        $level1.off("click",".add").on("click",".add",function (e) {
            createDialog({
                ajaxUrl:window.globalHost+common.addMenuPath
            });
        });
        $level2.off("click",".add").on("click",".add",function (e) {
            createDialog({
                ajaxUrl:window.globalHost+common.addMenuPath,
                upMenus:detailInfo
            });
        });
    });
}

var iconList=common.iconList.map(function (ele, idx) {
    var s=ele.map(function (itm,i) {
        return '<i class="fa fa-'+itm+'"></i>'
    }).join("");
    return '<li '+(idx==0?'class="now trans"':'')+'>'+s+'</li>';
});
/**
 * 父级部分渲染
 */
var upDom='<div style="margin-top: 10px;padding: 0 20px;" id="menu-list-form">'+
        '<input name="id" type="hidden" placeholder="请输入菜单名称">'+
        '<p  class="clearfix"><label class="col-xs-3 text-center">菜单名</label><input class="col-xs-8" type="text" name="menuName" required placeholder="请输入菜单名称"></p>'+
        '<p  class="clearfix"><label class="col-xs-3 text-center">关键字</label><input class="col-xs-8" type="text" name="tagName" placeholder="请输入关键字"></p>'+
        '<p  class="clearfix"><label class="col-xs-3 text-center">排序</label><input class="col-xs-8" type="text" name="sort" placeholder="请输入排序"></p>'+
        '<p  class="clearfix"><label class="col-xs-3 text-center">菜单路径</label><input class="col-xs-8" type="text" name="menuPath" placeholder="请输入菜单路径"></p>'+
        '<div  class="clearfix" style="margin-bottom:10px;position: relative;">' +
            '<label class="col-xs-3 text-center">图标选择</label>' +
            '<input class="col-xs-5" type="hidden" name="menuIconCss" placeholder="请选择图标">' +
            '<i class="fa fa-photo" id="icon-config" style="width: 16.66666667%;line-height: 32px;font-size: 24px;text-align: center;border:1px solid #c0c0c0;"></i>' +
            '<div class="icon-content col-xs-9" id="slider">' +
                '<ul class="icon-list clearfix">'+iconList.join("")+'</ul>' +
                '<div class="page-controller clearfix">' +
                    '<i class="fa fa-arrow-left pull-left toLeft"></i><i class="fa fa-arrow-right pull-right toRight"></i>' +
                '</div>' +
            '</div>'+
        '</div>'+
        '<p  class="clearfix"><label class="col-xs-3 text-center">上级菜单</label><select class="col-xs-8 upMenus" name="upId"></select></p>'+
        '<div  class="clearfix"><label class="col-xs-3 text-center">使用状态</label>' +
            '<p  class="col-xs-8 clearfix no-plr otherInfo">' +
                '<input type="radio" name="status" value="AVAILABLE" id="AVAILABLE"><label for="AVAILABLE" style="padding: 0 20px;height: 34px;">可用</label>' +
                '<input type="radio" name="status" value="FORBID" id="FORBID"><label for="FORBID" style="padding: 0 20px;height: 34px;margin:0 20px;">禁用</label>' +
            '</p>'+
        '</div>'+
    '</div>';
function lv1Render(selector,obj) {
    // 渲染显示数据，查
    selector=$(selector);
    var $ul=selector.find("ul");
    var dom=obj.map(function (ele,idx) {
        return '<li class="item clearfix" data-id="'+ele.id+'">'+
            '<p class="col-xs-2">'+ele.menuName+'</p>'+
            '<p class="col-xs-2">'+ele.tagName+'</p>'+
            '<p class="col-xs-5">'+ele.createTime+'</p>'+
            '<p class="col-xs-1">'+ele.sort+'</p>'+
            getStatus(ele.status)+
            '</li>';
    });
    $ul.html(dom.join(""));
    $ul.off("click",".item").on("click",".item",function (e) {
        var $this=$(this);
        var selfIndex=$this.index();
        var sonMenuList=obj[selfIndex]['subMenu'];
        lv2Render($level2,sonMenuList,obj,obj[selfIndex].id)
    });
    $ul.off("dblclick",".item").on("dblclick",".item",function (e) {
        var $this=$(this);
        var selfIndex=$this.index();
        var data=obj[selfIndex];
        createDialog({data:data,upMenus:obj});
        e.stopPropagation();
        e.preventDefault();
    });
}

function lv2Render(selector,obj,upMenus,checkedId) {
    // 渲染显示数据，查
    selector=$(selector);
    var $ul=selector.find("ul");
    var dom=obj.map(function (ele,idx) {
        var s=getStatus(ele.status);
        return '<li class="item clearfix" data-id="'+ele.id+'">'+
            '<p class="col-xs-2">'+ele.menuName+'</p>'+
            '<p class="col-xs-2">'+ele.tagName+'</p>'+
            '<p class="col-xs-2">'+ele.createTime+'</p>'+
            '<p class="col-xs-1">'+ele.upMenuName+'</p>'+
            '<p class="col-xs-3">'+ele.menuPath+'</p>'+
            '<p class="col-xs-1">'+ele.sort+'</p>'+s+
            '</li>';
    });
    $ul.html(dom.join(""));
    $ul.off("dblclick",".item").on("dblclick",".item",function (e) {
        var $this=$(this);
        var selfIndex=$this.index();
        var sonMenuList=obj[selfIndex];
        createDialog({
            data:sonMenuList,
            upMenus:upMenus,
            checkedId:checkedId
        });
        e.stopPropagation();
        e.preventDefault();
    });
}
function getStatus(status) {
    var dom='';
    if(status=='AVAILABLE'){
        dom='<p class="col-xs-1 available">可用</p>';
    }else if(status=='FORBID'){
        dom='<p class="col-xs-1 forbidden">禁用</p>';
    }else if(status=='DELETE'){
        dom='<p class="col-xs-1 delete">已删除</p>';
    }
    return dom;
}


function createDialog(opt) {
    var sendData={};
    var ajaxUrl=window.globalHost+common.updateMenuPath;
    common.openTempDialog({
        type:1,
        title: '更新菜单信息',
        area:['600px', '700px'],
        content:upDom,
        FailedMsg:"请完善菜单信息",
        sendData:sendData,
        ajaxUrl: opt.ajaxUrl || ajaxUrl,
        contentOnLoad:function (layerDocument) {
            // //弹窗内控件加载初始化
            if(opt.data){
                var content=layerDocument.find("#menu-list-form");
                common.initInputByNameOnLayer(opt.data,content);
                var iconName=opt.data.menuIconCss;
                var status=opt.data.status;
                layerDocument.find("#"+status).attr("checked",true);
            }
            var $upMenus=layerDocument.find(".upMenus");
            common.buildNormalSelect({
                selector:$upMenus,
                key:"id",
                text:"menuName",
                data:opt.upMenus,
                checked:opt.checkedId
            });
           // 创建图标选择列表
            utils.createIconChosen({
                container:layerDocument,
                initClass:iconName
            });
        },
        beforeSend:function (layerDocument) {
            var content=layerDocument.find("#menu-list-form");
            var json=common.formToJson(content);
            sendData=$.extend(sendData,json);
            return sendData.menuName;
        },
        resOk:function () {
            //如果更新成功，刷新表格数据
            location.reload();
        }
    });
}